<template>
  <div className="echarts1" ref="echarts">
    <!--白天晚上告警统计图-->
  </div>
</template>
<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    list: {
      handler() {
        this.drawEcharts()
      }
    }
  },
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  methods: {
    drawEcharts() {
      var that = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts)
      var option = {
        //图例组件
        legend: {
          top: 10,
          show: true,
          left: 'center',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(134, 168, 202, 1.00)',
            fontSize: '12'
          },
        },
        //直角坐标系内绘图网格 组件
        grid: {
          top: '40px',
          bottom: '20px',
          left: '20px',
          right: '20px',
          containLabel: true
        },

        //工具栏组件
        toolbox: {
          show: false,
          feature: {
            magicType: {
              type: ['line', 'bar'],
              title:{
                line:'切换为折线图',
                bar:'切换为柱状图'
              }
            },
            restore: {
              show: true,
              title:'还原'
            },
            saveAsImage: {
              title:'保存'
            }
          }
        },

        //提示框组件
        tooltip: {
          show: true,
          trigger: 'axis',

          axisPointer: {

            type: 'none',
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                //color: 'rgba(220, 239, 238, 0.1)'
                color: 'rgba(61, 136, 226, 0.5)'
              }, {
                offset: 1,
                //color: 'rgba(220, 239, 238, 0.5)'
                color: 'rgba(61, 136, 226, 0.5)'
              }], false),

            }

          }
        },

        //x轴组件
        xAxis: [
          {
            data: this.list.map(obj => obj.name),
            axisLabel: {
              color: 'rgba(155, 191, 224, 1.00)',
              textStyle: {
                fontSize: 12,
                fontFamily: 'MiSans'
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(18, 47, 90, 1.00)',
                width: 1
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 76, 129, 0.26)',
                width: 1,
              }
            },
            axisTick: {
              show: false
            },
          }],

        //y轴组件
        yAxis: {
          splitNumber: 4,
          axisLabel: {
            color: 'rgba(155, 191, 224, 1.00)',
            textStyle: {
              fontSize: 14,
              fontFamily: 'MiSans'
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(18, 47, 90, 1.00)',
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(18, 47, 90, 1.00)',
              width: 1,
              type: 'dashed'
            }
          }
        },

        //数据响应组件
        series: [
          {
            name: '黑夜',
            type: 'line',
            data: this.list.map(obj => obj.value),
            smooth: true,
            symbol: 'circle', //数值点设定为实心点
            symbolSize: 0, // 折线的点的大小
            itemStyle: {
              normal: {
                color: 'rgba(215, 126, 47, 1.00)', //点的颜色
                lineStyle: {
                  color: 'rgba(215, 126, 47, 1.00)', //线的颜色
                  width: 2, // 折线图线条粗细设置
                },
              },
            },
          },
          {
            name: '白天',
            type: 'line',
            data: this.list.map(obj => obj.value2),
            smooth: true,
            symbol: 'circle', //数值点设定为实心点
            symbolSize: 0, // 折线的点的大小
            itemStyle: {
              normal: {
                color: 'rgba(32, 235, 191, 1.00)', //点的颜色
                lineStyle: {
                  color: 'rgba(32, 235, 191, 1.00)', //线的颜色
                  width: 2, // 折线图线条粗细设置
                },
              },
            },
          },
        ]
      }

      var len = 0;

      setInterval(() => {
        if (len === this.list.map(obj => obj.name).length) {
          len = 0
        }
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: len,
        })
        len++
      }, 2000)

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)

    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
